<template>
    <div>
        <el-row>
            <el-col :xs="{span: 24}" :sm="{span: 4}">
                <el-input size="small" v-model="newId" placeholder="请输入新闻ID">
                    <template slot="prepend">新闻ID：</template>
                </el-input>
            </el-col>
            <el-col :xs="{span: 24}" :sm="{span: 4}">
                <el-input size="small" v-model="newTitle" placeholder="请输入新闻标题">
                    <template slot="prepend">新闻标题：</template>
                </el-input>
            </el-col>
            <el-col  :xs="{span: 24}" :sm="{span: 3}">
                <el-select size="small" v-model="newType" placeholder="请选择新闻类型">
                    <el-option value="" >
                        全部
                    </el-option>
                    <el-option
                    v-for="item in newsAllType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    <template slot="prepend">新闻类型：</template>
                    </el-option>
                </el-select>
            </el-col>
            <el-button size="small" type="primary" @click="secrchNews()" icon="el-icon-search">搜索</el-button>
            <router-link to="/manage/editnews">
                <el-button size="small" type="success" icon="el-icon-edit">新增</el-button>
            </router-link>
            <el-button size="small" type="danger" icon="el-icon-delete" @click="delGroup">删除</el-button>
        </el-row>
        <el-row  style="margin-top: 20px">
            <el-table
                @selection-change="selsChange"
                ref="multipleTable"
                :data="tableData3"
                tooltip-effect="dark"
                style="width: 100%"
                @row-click="handleRowChange"
                >
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                label="新闻ID"
                prop="id"
                width="120">
                </el-table-column>
                <el-table-column
                prop="name"
                label="新闻类型"
                width="120">
                </el-table-column>
                <el-table-column
                prop="title"
                label="新闻标题"
                >
                </el-table-column>
                <el-table-column
                prop="sub_title"
                label="新闻介绍"
                show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                label="创建时间"
                width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.update_time }}</span>
                </template>
                </el-table-column>
                <el-table-column
                label="操作"
                width="200"
                show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                :page-size="10"
                background
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import 	News 		from "@/service/news-service.js";
import 	Menu 		from "@/service/menu-service.js"
const 	_menu 	    = new Menu();
const 	_news 		= new News();
export default {
    name:"News",
    props:{},
    data :function() {
        return {
            tableData3: [],
            value: '',
            newId: '',
            newTitle: '',
            newType: '',
            total: 0,
            newsAllType:[],
            sels:[],
            currentPage :0
        }
    },
    created(){
        this.findSomeNews();
        this.findNewType();
    },
    methods:{
        // 这里是点击编辑的事件
        handleEdit(index,row){
            this.$router.push({path:'/manage/editNews/'+row.id});
        },
        //这里是点击分页查询
        handleCurrentChange(val){
            this.currentPage = val-1
            this.findSomeNews();
        },
        // 这里是查找所有的新闻类型
        findNewType(){
           _menu.menuList({pId:"1"}).then((res)=>{
               this.newsAllType = res.data;
           },(err)=>{
                this.$message.error(err);
           }) 
        },
        // 这里是查找指定要求的数据
        findSomeNews(){
            const loading = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            _news.findSomeNews({"newId":this.newId,"newTitle":this.newTitle,"newType":this.newType,"pageSize":"10","currentPage":this.currentPage,}).then((res)=>{
                this.tableData3 = res.data;
                if(res.count <= 10){
                    this.total = 10;
                }else{
                    this.total = res.count;
                }
                // 这里是判断数据是不空
                if(res.data.length == 0 && this.currentPage != 0){
                    this.currentPage--
                    this.secrchNews();
                }
                loading.close()
            },(err)=>{
                 this.$message.error(err);
            })
        },
        // 这是点击搜索的按钮
        secrchNews(){
            this.findSomeNews();
        },
        handleDelete(index,row){
            this.$confirm('您确定删除这条新闻, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 这里调用删除接口进行删除数据
                _news.deleteNews({"ids":row.id}).then((res)=>{
                    this.findSomeNews();
                },(err)=>{
                     this.$message.error(err);
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 获取多选参数
        handleRowChange(row, event, column) {
            this.$refs.multipleTable.toggleRowSelection(row)
        },
        //获取所有选中行的id组成的字符串，以逗号分隔
        delGroup() {
            this.$confirm('您确定删除选中的新闻, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var ids = this.sels.map(item => item.id).join();
                // 这里调用删除接口进行删除数据
                _news.deleteNews({"ids":ids}).then((res)=>{
                    this.findSomeNews();
                },(err)=>{
                    this.$message.error(err);
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 当行数改变的时候修改参数的值
        selsChange(sels) {
            this.sels = sels;
        },
    }

}
</script>
<style scoped>
.el-form--inline .el-form-item__label{
    float: left;
}
.el-pagination{
    text-align: center;
    margin-top: 20px;
}
</style>
